<template lang="pug">
.view.cp-manage-product.fix-flex-pos
  el-tabs.manproduct-tabs(v-model="activeName", @tab-click="handleTab")
    el-tab-pane(v-for="(item, index) in paneList" :label="item.label", :name="item.name", :key="index")
  .fix-flex-pos.man-main
    keep-alive
      router-view
</template>

<script>
export default {
  name: 'manproduct',
  data() {
    return {
      activeName: '',
      paneList: [
        { label: '产品定义', name: 'definition' },
        { label: '层级设置', name: 'level' },
        { label: '状态管理', name: 'status' },
        { label: '权限管理', name: 'limit' },
        { label: '需求追溯', name: 'trace' },
        { label: '基线管理', name: 'basic' },
        { label: '风险管理', name: 'risk' }
      ]
    };
  },
  methods: {
    handleTab () {
      this.$router.push({ name: `manproduct${this.activeName}` });
    }
  },
  beforeRouteEnter (to, from, next) {
    const path = to.path;
    const activeName = path.split('/')[3];
    next((vm) => {
      vm.activeName = activeName;
    });
  },
  // 监听路由变化
  beforeRouteUpdate (to, from, next) {
    const path = to.path;
    this.activeName = path.split('/')[3];
    next();
  },
  created () {
    this.activeName = this.paneList[0].name;
  },
  mounted() {
  }
};
</script>

<style lang="sass">
@import "../../../styles/utils"
$TABHEIGHT: 42px
.cp-manage-product
  overflow-x: hidden
  overflow-y: auto
  background: $THEMECOLOR
  .manproduct-tabs
    position: relative
    height: $TABHEIGHT
    background: white
    padding-left: 20px
    border-top: 2px solid #eee
    .el-tabs__item:focus.is-active.is-focus:not(:active)
      box-shadow: none
    .el-tabs__nav-wrap::after
      background-color: white
  .man-main
    top: $TABHEIGHT
</style>
